import { useEffect, useState } from 'react';
import { DatePicker, Form, Select, Spin } from 'antd';

import request from '@/utils/request';
import { afterDay, pastDay } from '@/utils/time';

import { BEHAVIOR, CONTAINS_EDU_CARDS } from '../constants';

import RangeCount from './RangeCount';

const disabledDate = (current) =>
  current && (current < pastDay(365) || current > afterDay(365));

const EduTransformPeople = (props) => {
  const { form, customType } = props;
  const [fetching, setFecthing] = useState(true);
  const [options, setOptions] = useState([]);

  useEffect(() => {
    const fetchSubjects = async () => {
      setFecthing(true);
      const SubjectUriMap = {
        10: '/api/dmp/tag/edu_consumer_dim/edu_content_consumer',
        11: '/api/dmp/tag/edu_consumer_dim/edu_non_content_consumer',
        12: '/api//dmp/tag/edu_consumer_dim/edu_sku_consumer',
      };
      const result = await request(SubjectUriMap[customType]);
      setFecthing(false);
      setOptions(result.data || []);
    };
    fetchSubjects();
  }, []);

  const isEduContentConsumer = customType === 10; // 教育内容消费圈选
  const isEduNotContentConsumer = customType === 11; // 教育非内容消费圈选

  return (
    <Form form={form}>
      <Form.Item label="科目" rules={[{ required: true }]} name="subjects">
        <Select
          labelInValue={true}
          placeholder="请选择科目"
          options={options.map((v) => ({ label: v, value: v }))}
          mode="multiple"
          notFoundContent={fetching ? <Spin size="small" /> : null}
          maxTagCount="responsive"
        />
      </Form.Item>
      <Form.Item
        label="指定时间"
        rules={[{ required: true }]}
        name="date_range"
      >
        <DatePicker.RangePicker disabledDate={disabledDate} />
      </Form.Item>
      {isEduContentConsumer && (
        <Form.Item
          label="是否插卡"
          rules={[{ required: true }]}
          name="contains_edu_cards"
        >
          <Select
            labelInValue={true}
            placeholder="请选择是否插卡"
            mode="multiple"
            options={Object.entries(CONTAINS_EDU_CARDS).map(([v, l]) => ({
              label: l,
              value: +v,
            }))}
          />
        </Form.Item>
      )}
      {(isEduContentConsumer || isEduNotContentConsumer) && (
        <Form.Item
          label="核心行为"
          rules={[{ required: true }]}
          name="behavior"
        >
          <Select
            labelInValue={true}
            placeholder="请选择核心行为"
            mode="multiple"
            options={Object.entries(BEHAVIOR[customType]).map(([v, l]) => ({
              label: l,
              value: +v,
            }))}
          />
        </Form.Item>
      )}
      {(isEduContentConsumer || isEduNotContentConsumer) && (
        <Form.Item
          label="互动次数"
          rules={[{ required: true }]}
          name="value_range"
        >
          <RangeCount />
        </Form.Item>
      )}
    </Form>
  );
};

export default EduTransformPeople;
